<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="no" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="../css/puke.css"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_934639_vhwjlxx7eue.css"/>
    <title>扑克牌</title>
</head>
<body>
    <ul class="list" flex="dir:top cross:center">
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>A</p>
                <p class="p1">♠</p>
            </div>
            <div class="taohua" flex="cross:center">
                   ♠
            </div>
            <div class="xia" flex="cross:bottom dir:top">
                <p>A</p>
                <p class="p1">♠</p>
            </div>
        </li>
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>2</p>
                <p class="p1">♠</p>
            </div>
            <div flex="dir:top main:justify">
                <span class="taohua1">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="xia" flex="cross:bottom dir:top">
                <p>2</p>
                <p class="p1">♠</p>
            </div>
        </li>
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>3</p>
                <p class="p1">♠</p>
            </div>
            <div flex="cross:center main:justify dir:top">
                <span class="taohua1">♠</span>
                <span class="taohua1" flex="cross:center">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="xia" flex="cross:bottom dir:top">
                <p>3</p>
                <p class="p1">♠</p>
            </div>
        </li>
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>4</p>
                <p class="p1">♠</p>
            </div>
            <div flex="dir:top main:justify">
                <span class="taohua1" >♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div></div>
            <div flex="dir:top main:justify">
                    <span class="taohua1">♠</span>
                    <span class="taohua2">♠</span>
                </div>
            <div class="xia" flex="cross:bottom dir:top">
                <p>4</p>
                <p class="p1">♠</p>
            </div>
        </li>
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>5</p>
                <p class="p1">♠</p>
            </div>
                <div flex="dir:top main:justify">
                    <span class="taohua1">♠</span>
                    <span class="taohua2">♠</span>
                </div>
                <div flex="cross:center">
                    <span class="taohua1">♠</span>
                </div>
                <div flex="dir:top main:justify">
                    <span class="taohua1">♠</span>
                    <span class="taohua2">♠</span>
                </div>

            <div class="xia" flex="cross:bottom dir:top">
                <p>5</p>
                <p class="p1">♠</p>
            </div>
        </li>
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>6</p>
                <p class="p1">♠</p>
            </div>
            <div flex="cross:center main:justify dir:top">
                <span class="taohua1">♠</span>
                <span class="taohua1" flex="cross:center">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div></div>
            <div flex="cross:center main:justify dir:top">
                <span class="taohua1">♠</span>
                <span class="taohua1" flex="cross:center">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="xia" flex="cross:bottom dir:top">
                <p>6</p>
                <p class="p1">♠</p>
            </div>
        </li>
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>7</p>
                <p class="p1">♠</p>
            </div>
            <div flex="cross:center main:justify dir:top">
                <span class="taohua1">♠</span>
                <span class="taohua1" flex="cross:center">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="hua" flex="cross:top">
                <span class="taohua1">♠</span>
            </div>
            <div flex="cross:center main:justify dir:top">
                <span class="taohua1">♠</span>
                <span class="taohua1" flex="cross:center">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="xia" flex="cross:bottom dir:top">
                <p>7</p>
                <p class="p1">♠</p>
            </div>
        </li>
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>8</p>
                <p class="p1">♠</p>
            </div>
            <div flex="cross:center main:justify dir:top">
                <span class="taohua1">♠</span>
                <span class="taohua1" flex="cross:center">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="hua" flex="dir:top main:justify">
                <span class="taohua1">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div flex="cross:center main:justify dir:top">
                <span class="taohua1">♠</span>
                <span class="taohua1" flex="cross:center">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="xia" flex="cross:bottom dir:top">
                <p>8</p>
                <p class="p1">♠</p>
            </div>
        </li>
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>9</p>
                <p class="p1">♠</p>
            </div>

            <div flex="dir:top main:justify">
                <span class="taohua1" >♠</span>
                <span class="taohua1" >♠</span>
                <span class="taohua2">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="hua" flex="cross:center">
                <span class="taohua1">♠</span>
            </div>
            <div flex="dir:top main:justify">
                <span class="taohua1" >♠</span>
                <span class="taohua1" >♠</span>
                <span class="taohua2">♠</span>
                <span class="taohua2">♠</span>
            </div>


            <div class="xia" flex="cross:bottom dir:top">
                <p>9</p>
                <p class="p1">♠</p>
            </div>
        </li>
        <li flex="main:justify">
            <div flex="main:left dir:top">
                <p>10</p>
                <p class="p1">♠</p>
            </div>
            <div flex="dir:top main:justify">
                <span class="taohua1" >♠</span>
                <span class="taohua1" >♠</span>
                <span class="taohua2">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="hua" flex="dir:top main:justify">
                <span class="taohua1">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div flex="dir:top main:justify">
                <span class="taohua1" >♠</span>
                <span class="taohua1" >♠</span>
                <span class="taohua2">♠</span>
                <span class="taohua2">♠</span>
            </div>
            <div class="xia" flex="cross:bottom dir:top">
                <p>10</p>
                <p class="p1">♠</p>
            </div>
        </li>
    </ul>

</body>
</html>